<template>
  <div>
    <!-- title是对话框的标题 -->
    <!-- visible: 是否显示, sync同步控制 -->
    <el-dialog
      :title="msg.type == 'add' ? '添加菜单':'修改菜单' "
      :visible.sync="msg.isShow"
      width="60%"
    >
    <!-- model: 表单的变量 -->
    <!-- rules: 校验的规则 -->
    <el-form ref="ruleFrom" 
    :model="ruleFrom" 
    :rules="rules"  
    label-width="80px" >
      <el-form-item label="类型" prop="type">
        <!-- 编辑状态下禁用单选框 -->
        <el-radio-group v-model="ruleFrom.type" :disabled="msg.type == 'edit'">
          <el-radio :label="1"   >目录</el-radio>
          <el-radio :label="2"   >菜单</el-radio>
        </el-radio-group>
      </el-form-item>


    <el-form-item v-show="ruleFrom.type == 2" label="上级" prop="pid">
      <!-- 要添加的 -->
        <el-select v-model="ruleFrom.pid" placeholder="请选上级目录">
          <el-option label="顶级目录" :value="0"></el-option>
          <el-option v-for="(menu,index) in menuList" :key="index"  :label="menu.title" :value="menu.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="标题" prop="title">
        <el-input type="text" v-model="ruleFrom.title"></el-input>
      </el-form-item>
      <el-form-item v-show="ruleFrom.type == 1" label="图标" prop="icon">
        <el-input type="text" v-model="ruleFrom.icon"></el-input>
      </el-form-item>
      <el-form-item v-show="ruleFrom.type == 2" label="地址" prop="url">
        <el-input type="text" v-model="ruleFrom.url"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleFrom.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="success" @click="onSubmit">立即创建</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item> -->
    </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button v-if="msg.type == 'add'" @click="submit">立即添加</el-button>
          <el-button v-if="msg.type == 'edit'" @click="submit">立即修改</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {getMenuListApi, editMenuApi} from '../../api'
export default {
  props:['msg'],
     data() {
       return {
        // 表单数据
        ruleFrom: {
          pid:0,
          title:'',
          icon:'',
          type:1,
          url:'',
          status:1
        },
         rules: {
          title: [ // required 必填项, message 是报错信息,  trigger 是触发方式
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        },
        menuList:[]
      }
    },
    created(){
      // 发请求,
      this.getMenuList();
      // console.log(this.menuList);
    },
    beforeUpdate(){
      if(this.ruleFrom.type == 1){
        this.ruleFrom.pid = 0
      }
    },
    methods: {

      // onSubmit() {
      //   console.log('submit!');
      //   this.$emit('close')
      // },
      // close(){
      //   this.$emit('close')
      // },
      // show(){
      //   console.log(this.ruleFrom.type);
      // }
      setVal(info){
        // 浅拷贝  避免数据相互影响
        this.ruleFrom = {...info};
      },
      submit(){
        // this.$refs.ruleFrom 选中表单   validate  element的校验函数
        this.$refs.ruleFrom.validate(async (val) => {
          if(val){
            // 校验通过
            if(this.msg.type == 'add'){
              // 添加
              this.http.post('/menuadd',this.ruleFrom)
                .then(res => {
                  if(res.code == 200){
                    // 200表示成功
                    this.$message({
                     type: "success",
                     message: res.msg,
                   });
                    // 更新数据
                    // this.tableData = res.list;
                  }else{
                     this.$message({
                     type: "warning",
                     message: res.msg,
                   });
                  }
                })
                .catch(err => {
                  console.log(err);
                })
            }else{
              this.ruleFrom.children ? delete this.ruleFrom.children : ''
              let res = await editMenuApi(this.ruleFrom);
               this.$message({
                type: "success",
                message: res.msg,
              });
            }
            this.$emit('updata');
            this.msg.isShow = false;
          }else{
            // 校验失败
            return false;
          }
        })


      },
      // 获取下拉菜单
      async getMenuList(){
        // 调用api文件发送请求
        let res = await getMenuListApi();
        this.menuList = res.list;


        // 独立发请求
        // istree=1 加了这个就是树形结构
        // this.http('/menulist?istree=1')
        //   .then(res => {
        //     console.log(res);
        //     this.menuList = res.list;
        //   })
        //   .catch(err => {
        //     console.log(err);
        //   })
      },
      reset(){
        // 重置清除输入框内容
        this.ruleFrom = {
          pid:0,
          title:'',
          icon:'',
          type:this.ruleFrom.type,
          url:'',
          status:1
        }
      }

    },



};
</script>

<style>
</style>